<template>
  <task-container :isTable="false" @menuItemClick="onMenuItemClick" @setOperation="onSetOperation">
    <div class="c-table" style="flex: 1;">
      <custom-table
        ref="table"
        rowKey="id"
        bordered
        :showAlert="false"
        :showSelection="false"
        :loading="loading"
        :columns="columns"
        :dataSource="pageData"
        :rowClassName="rowClassName"
        @rowClick="onRowClick"
        @change="onTableChange"
      >
        <template slot="msisdn" slot-scope="text, record">
          <!-- {{ record.isSamplePerson }} -->
          <span>{{ text }}</span>
          <a-tag v-if="record.isSamplePerson" style="margin-top:10px;" color="red">负样本人员</a-tag>
        </template>
      </custom-table>
    </div>
    <a-card title="查询结果" :bordered="false" size="small" :bodyStyle="{ padding: 0 }">
      <a-button slot="extra" @click="doFetch" v-if="isOperation"> 更新数据 </a-button>
      <div class="c-box">
        <a-tabs v-model="type" @change="callback">
          <a-tab-pane :key="1" tab="内部重点人分析">
            <div class="inside_box">
              <div class="inside_top_box">
                <div class="inside_color_box">
                  <div class="color_box">
                    <div class="border_box" style="background-color:#92939d;"></div>
                    <div clas="color_desc_box">低</div>
                  </div>
                  <div class="color_box">
                    <!-- <div class="border_box" style="background-color:#FACD91;"></div> -->
                    <div class="border_box" style="background-color:#6766b8;"></div>
                    <div clas="color_desc_box">中</div>
                  </div>
                  <div class="color_box">
                    <!-- <div class="border_box" style="background-color:#81D3F8"></div> -->
                    <div class="border_box" style="background-color:#50a4ab"></div>
                    <div clas="color_desc_box">高</div>
                  </div>
                </div>
                <a-button type="primary" style="margin-left:10px;" @click="showModalYZ(true)">阈值设置</a-button>
                <a-modal
                  title="阈值设置"
                  :visible="visibleYZ"
                  @ok="handleOkYZ"
                  :confirmLoading="confirmLoading"
                  @cancel="handleCancelYZ"
                >
                  <div style="margin-bottom: 20px;">通联次数范围：</div>
                  <div class="relationship_eChart_num_box">
                    <div class="relationship_eChart_num_row_box">
                      <div class="relationship_eChart_num_text_box">低： 0 -</div>
                      <a-input-number
                        class="relationship_eChart_num_input_box"
                        :min="1"
                        type="Number"
                        @change="lowNumInput"
                        v-model="lowNum"
                      ></a-input-number>
                    </div>
                    <div class="relationship_eChart_num_row_box">
                      <div class="relationship_eChart_num_text_box">中： {{ lowNum + 1 }} -</div>
                      <a-input-number
                        class="relationship_eChart_num_input_box"
                        :min="3"
                        type="Number"
                        @change="middleNumInput"
                        v-model="middleNum"
                      ></a-input-number>
                    </div>
                    <div class="relationship_eChart_num_row_box">
                      <div class="relationship_eChart_num_text_box">高： {{ middleNum + 1 }} - Max</div>
                    </div>
                  </div>
                </a-modal>
              </div>
            </div>
            <div class="eChartRelationship_box1">
              <eChartsRelationship
                :leftList="dataList1"
                :lowNumEchart="lowNum"
                :middleNumEchart="middleNum"
                :type="type"
                :data="data"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane :key="2" tab="外部重点人挖掘" force-render>
            <div class="outside_box">
              <div class="inside_top_box">
                <div class="inside_color_box">
                  <div class="color_box">
                    <!-- <div class="border_box" style="background-color:#ff6600;"></div> -->
                    <div class="border_box" style="background-color:#92939d;"></div>
                    <div clas="color_desc_box">内部</div>
                  </div>
                  <div class="color_box">
                    <!-- <div class="border_box"></div> -->
                    <div class="border_box" style="background-color:#6766b8;"></div>
                    <div clas="color_desc_box">外部</div>
                  </div>
                  <div class="outside_input_box">
                    <span>通联人数：</span>
                    <a-input-number :min="2" :max="10" v-model="num" @change="onChangeNum" />
                  </div>
                </div>
              </div>
            </div>
            <div class="eChartRelationship_box2">
              <eChartsRelationship
                :leftList="dataList1"
                :lowNumEchart="lowNum"
                :middleNumEchart="middleNum"
                :type="type"
                :data="data"
              />
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
    <details-drawer ref="drawerRef" :taskId="taskId" :msisdn="selectItem.msisdn" :title="titleDrawer" @close="close" />
  </task-container>
</template>
<script>
import * as eventModelApi from '@/api/wxSmuggle/eventModel.js'
import taskContainer from '../modules/taskContainer'
import CustomTable from '@/components/zxd/Table/CustomTable'
import eChartsRelationship from '../modules/echart_relationship'
import detailsDrawer from '../modules/gangRelationsDrawer'
import { querySimpleByPhoneList } from '@/utils/util'
export default {
  components: {
    taskContainer,
    CustomTable,
    eChartsRelationship,
    detailsDrawer
  },
  data() {
    return {
      spinning: false,
      searchValue: '',
      loading: false,
      selectKey: null,
      taskId: null,
      columns: [
        {
          title: '序号',
          width: 60,
          align: 'center',
          dataIndex: 'order',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '代号',
          dataIndex: 'name',
          width: 60,
          align: 'center'
        },
        {
          title: '手机号',
          dataIndex: 'msisdn',
          width: 70,
          align: 'center',
          scopedSlots: { customRender: 'msisdn' }
        },
        {
          title: '归属地',
          dataIndex: 'homeCode',
          width: 70,
          align: 'center'
        },
        {
          title: '团伙人数',
          dataIndex: 'personCount',
          width: 80,
          align: 'center'
        },
        {
          title: '更新时间',
          dataIndex: 'createTime',
          width: 80,
          align: 'center'
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {},
      selectItem: {
        msisdn: null
      },
      visibleYZ: false,
      confirmLoading: false,
      type: 1,
      num: 2,
      number: 0, // 内部重点人分析
      lowNum: 0,
      middleNum: 0,
      dataList1: [],
      encryption: 1, // 0：加密; 1：不加密
      // 关系图参数
      data: {},
      titleDrawer: null,
      isOperation: true
    }
  },
  mounted() {},
  methods: {
    // 点击左边任务
    onMenuItemClick(id) {
      this.taskId = id
      this.refreshTable()
    },
    onSetOperation(isOperation) {
      this.isOperation = isOperation
    },
    rowClassName(record, index) {
      let className = ''
      if (record.id === this.selectKey) className = 'row-selected'
      return className
    },
    onRowClick(keys) {
      this.selectKey = keys && Object.keys(keys).length > 0 && keys.id ? keys.id : null
      this.selectItem = keys
      this.titleDrawer = keys.msisdn + '与团伙号码通联分析'
      this.$refs.drawerRef.add()
    },
    refreshTable() {
      let obj = {
        taskId: this.taskId
      }
      let form = Object.assign({}, obj, this.pageFilter)
      this.loading = true
      eventModelApi
        .getPeopleList(form)
        .then(res => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            // this.dataList1 = []
            this.dataList1 = res.result.records
            this.callback(1)
            this.loading = false
            //判断是否是负样本号码，并添加负样本标签(电话号码字段：phoneNumber传1，phone传2，msisdn传3)
            querySimpleByPhoneList(this, 3, this.pageData.records)
          } else {
            this.loading = false
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    // 更新数据
    doFetch() {
      let form = {
        taskId: this.taskId
        // msisdn: this.selectItem && Object.keys(this.selectItem).length>0 && this.selectItem.msisdn?this.selectItem.msisdn: null
      }
      eventModelApi
        .updateGangsRelationData(form)
        .then(res => {
          if (res.success) {
            this.$message.success(res.message ? res.message : '更新成功')
          } else {
            this.$message.warn(res.message ? res.message : '更新失败')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    // tabs切换
    callback(e) {
      this.data = {}
      if (e === 1) {
        this.type = 1
        this.number = 0
        this.data = {
          taskId: this.taskId,
          type: this.type,
          number: this.number, // 通联人数
          encryption: this.encryption
        }
        this.showModalYZ()
        // this.getData1.type = 1
        // this.getPeopleList()
      } else if (e === 2) {
        this.num = 2
        this.type = 2
        this.number = 2
        this.data = {
          taskId: this.taskId,
          type: this.type,
          number: this.number, // 通联人数
          encryption: this.encryption
        }
        // this.getData1.type = 2
        // this.getPeopleList()
      }
    },
    // 打开阈值设置弹窗
    showModalYZ(YZ) {
      if (YZ) {
        this.visibleYZ = true
      } else {
        let data = {}
        data = {
          taskId: this.taskId
        }
        // 阈值查询
        eventModelApi.getThreshold(data).then(res => {
          if (res.success) {
            this.lowNum = res.result.smallParameters ? res.result.smallParameters : 1
            this.middleNum = res.result.bigParameters ? res.result.bigParameters : 3
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    },
    // 阈值设置
    handleOkYZ(e) {
      this.confirmLoading = true
      let data = {}
      data = {
        bigParameters: this.middleNum,
        id: this.taskId,
        smallParameters: this.lowNum
      }
      // 阈值设置
      eventModelApi.setThreshold(data).then(res => {
        if (res.success) {
          setTimeout(() => {
            this.visibleYZ = false
            this.confirmLoading = false
            this.$message.success('阈值设置成功')
          }, 2000)
        }
      })
    },
    // 阈值输入框变化
    lowNumInput(e) {
      this.lowNum = Number(e)
    },
    middleNumInput(e) {
      this.middleNum = Number(e)
    },
    handleCancelYZ(e) {
      this.visibleYZ = false
    },
    // 通联人数
    onChangeNum(e) {
      if (e >= 2 && e <= 10) {
        this.data = {
          taskId: this.taskId,
          type: this.type,
          number: e, // 通联人数
          encryption: this.encryption
        }
      }
    },
    close() {}
  }
}
</script>
<style lang="less" scoped>
/deep/.menuBox {
  height: auto;
}
/deep/.row-selected {
  background-color: #e6f7ff;
}

.thgx-table1 {
  .ant-table-pagination.ant-pagination {
    position: absolute;
    // left: 100px;
    margin-top: 25px;
    margin-bottom: 50px;
  }
}
.thgx-table2 {
  .ant-table-pagination.ant-pagination {
    width: 100%;
    position: absolute;
    left: 5%;
    margin-top: 25px;
    margin-bottom: 50px;
  }
}
.thgx-table3 {
  .ant-table-pagination.ant-pagination {
    position: absolute;
    left: 25%;
    margin-top: 25px;
    margin-bottom: 50px;
  }
}
// .eChartRelationship_box1 {
// margin-left: -350px;
// }
.eChartRelationship_box2 {
  padding-top: 20px;
  // margin-left: -200px;
}
.thgx_box {
  padding: 16px 32px 0 32px;
}
.thgx_top_box {
  margin-bottom: 18px;
}
.thgx_table_btn_box {
  margin-bottom: 15px;
}
.relationship_eChart_box {
  margin-left: 22px;
}
.inside_top_box {
  display: flex;
  align-items: flex-end;
}
.inside_color_box {
  display: flex;
  align-items: center;
}
.color_box {
  display: flex;
  margin-right: 15px;
}
.border_box {
  margin-right: 6px;
  width: 40px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border: 1px solid #000;
  // background-color: #ec808d;
  background-color: #92939d;
}
.outside_input_box {
  display: flex;
  align-items: center;
}
.relationship_eChart_num_box {
  margin-left: 45px;
}
.relationship_eChart_num_row_box {
  margin-bottom: 20px;
}
.relationship_eChart_num_text_box {
  margin-right: 8px;
  display: inline-block;
}
.relationship_eChart_num_input_box {
  display: inline-block;
  width: 100px;
}
</style>
